{%  extends  'surveillanceapp/base.html' %}
{% load static %}

<!-- extra css block starts here -->
{% block extracss %}

    <style>
    .info-box{
        padding: auto;
        background: #1a2732;
        color: #dbdde2;
    }
    .info-box i{
        color: #fed189;
    }
    .info-box p{
        font-size: 125%;
    }
    #station-panel{
        display: none;   /* hide station-panel in the beginning */
    }
    #station-info-clickable{
        cursor: pointer;
    }
    #station-info-clickable:hover{
        background: #dddddd;
    }

    </style>

{% endblock %}
<!-- extra css block ends here -->

<!-- main content block starts here -->
{%  block main-content %}
    <div class="row">
      <div class="col-lg-12">
        <ol class="breadcrumb">
          <li><i class="fa fa-home"></i><a href="{% url 'surveillanceapp:index' %}">Home</a></li>
          <li><i class="fa fa-laptop"></i>Dashboard</li>
        </ol>
      </div>
    </div>
    <div class="row">
        <div class="col-lg-3">
            <div class="info-box">
              <i class="fas fa-map-marker-alt"></i>
              <div class="count">{{ stationCount }}</div>
              <p>Stations</p>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="info-box">
              <i class="fa fa-camera"></i>
              <div class="count">{{ videoCount }}</div>
              <p>Surveillance Videos</p>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="info-box">
              <i class="fas fa-clipboard-list"></i>
              <div class="count">{{ reportCount }}</div>
              <p>Reports Generated</p>
            </div>
        </div>
        <div class="col-lg-3">
            <div class="info-box">
              <i class="fas fa-bus"></i>
              <div class="count">{{ vehicleCount }}</div>
              <p>Vehicles Analyzed</p>
            </div>
        </div>
    </div>
    <!-- MAP and Station Detail starts -->
    <div class="row">
        <div class="col-lg-12" id="map-panel">
            <div class="panel panel-default">
              <div class="panel-heading">
                <h2><i class="fas fa-map-marker-alt"></i><strong>Stations Map</strong></h2>
                <div class="panel-actions">
                  <a href="{% url 'surveillanceapp:index' %}" class="btn-setting"><i class="fa fa-refresh"></i></a>
                </div>
              </div>
              <div class="panel-body-map">
                <div id="map" style="height: 550px;width: 100%"></div>
              </div>
            </div>
        </div>
     <!-- MAP ENDS HERE -->
        <div class="col-lg-4">
            <div class="panel panel-default" id="station-panel">
                <div class="panel-heading">
                    <h2><i class="fa fa-info-circle"></i><strong>Station Info</strong></h2>
                    <div class="panel-actions"><i class="fa fa-times" id="close-station-info"></i></div>
                </div>
                <div class="panel-body">
                    <div id="station-info-clickable">
                        <img src="" id="station-pic" width="100%">
                        <ul class="list-group col-lg-6">
                            <li class="list-group-item" >Station Id <p class="lead" id="station-id"></p></li>
                            <li class="list-group-item" >Station Name <p class="lead" id="station-name"></p></li>
                        </ul>
                        <ul class="list-group col-lg-6">
                            <li class="list-group-item" >Latitude Position <p class="lead" id="lat-pos"></p></li>
                            <li class="list-group-item" >Longitude Position <p class="lead" id="lon-pos"></p></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    <!-- Station Detail ENDS HERE -->
    </div>
{% endblock %}
<!-- main content block ends here -->

<!-- extra script block starts here -->
{% block extrajs %}
    <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBAUsak2E8DcVtc3hUtrg06-pPHER8LXdk&callback=initMap">
    </script>
    <!-- MAP SCRIPT HERE-->
    <script>
        var map;
        var stationpanel = document.querySelector('#station-info-clickable');
        function initMap() {
            var loc = {lat: 27.7172, lng: 85.3240};
            map = new google.maps.Map(
                document.getElementById('map'), {zoom: 12, center: loc});

            {##}
            {#var coords = {};  //creating an object#}

            {% for station in stations %}
                {#coords[{{ station.station_id }}] = {   //array of object#}
                {#    id:{{station.station_id }},#}
                {#    name: "{{ station.station_name }}",#}
                {#    lat:{{ station.lat_pos }},#}
                {#    lng:{{ station.lon_pos }}#}
                {##}

                var iw = new google.maps.InfoWindow();  //creating infowindow object

                //initialize the map with markers

                var loc = {lat: {{ station.lat_pos }}, lng: {{ station.lon_pos }} };

                var marker = new google.maps.Marker({position: loc, map: map});
                //add event listener

                console.log("{{ station.station_name }}" + '' + {{ station.lat_pos }} + '');

                //add event listener using callback function
                google.maps.event.addListener(marker,'click',(function(marker) {
                        return function () {
                            document.getElementById("station-id").innerHTML = {{ station.station_id }};
                            document.getElementById("station-name").innerHTML = "{{ station.station_name }}";
                            document.getElementById("lat-pos").innerHTML = {{ station.lat_pos }};
                            document.getElementById("lon-pos").innerHTML = {{ station.lon_pos }};
                            document.getElementById("station-pic").setAttribute('src',"{% static station.station_pic.url %}");
                            document.getElementById("map-panel").classList.remove("col-lg-12");
                            document.getElementById("map-panel").classList.add("col-lg-8");
                            document.getElementById('station-panel').style.display='block';
                            stationpanel.addEventListener('click',function(){
                               window.location.href = "{% url 'surveillanceapp:stationdetails' station.station_id %}";
                            });

                            //set infowindow content
                            iw.setContent("{{ station.station_name }}");
                            iw.open(map, marker);
                        }
                    }
                )(marker));

            {% endfor %}

        }

        //close-station-info icon listener
        //sets station panel css display attribute to none
        document.getElementById('close-station-info').addEventListener('click',function(){
            document.getElementById('station-panel').style.display='none';
            document.getElementById("map-panel").classList.remove("col-lg-8");
            document.getElementById("map-panel").classList.add("col-lg-12");
        });


    </script>

{% endblock %}

<!-- extra script block ends here -->


